<template lang="html">
  <div class="singerinfo">

    <div class="info-top">
        <SwiperSlider />
    </div>

    <div class="menu-list">
       <MenuList />
  	</div>

    <div class="song-list">
      <router-link :key="index" :to="{name:'MusicPlayer',params:{songid:item.song_id}}" tag="div" class="song-info" v-for="(item,index) in musicData.songlist">
  			<div class="song-zj">
  				<p class="song">{{item.title}}</p>
  				<p class="zj">{{item.author}} — {{item.title}}</p>
  			</div>
  			<div class="mv"><img src="../../../assets/images/mv-logo-singer.png"></div>
  			<div class="share"><img src="../../../assets/images/icon-pull@2x32.png"></div>
      </router-link>
  	</div>
  </div>
</template>

<script>
import SwiperSlider from "./SwiperSilder"
import MenuList from "./MenuList"

export default {
  name:"singerinfo",
  data(){
    return{
      musicData:{
        songlist:[]
      }
    }
  },
  components:{
     SwiperSlider,
     MenuList

  },
  created(){
    const SingerUrl = this.HOST + "/v1/restserver/ting?method=baidu.ting.artist.getSongList&tinguid="+this.$route.params.singerid+"&limits=10&use_cluster=1&order=2"
    this.$axios.get(SingerUrl)
    .then(res => {
      this.musicData = res.data
        console.log(res);
    })
    .catch(error => {
      console.log(error);
    })
  },
  methods:{

  }
}
</script>

<style scoped>
.info-top{
  background-size: 100%;
	width: 100%;
	height: 4.33rem;
}
.menu-list{
  margin-top: 2rem;
}
.singerinfo{
  position: relative;
	z-index: 11;
}
.song-info{
	width: 100%;
  height: 1.2rem;
	background-color: #fff;
	margin-bottom: 0.04rem;
	position: relative;
	overflow: hidden;
	z-index: 11;
}
.song-info .song-zj{
	margin-top: 0.32rem;
	width: 55.4rem;
	margin-left: 0.2rem;
}
.song-info .song-zj .song{
	font-size: 0.33rem;
  font-weight: bold;
  margin-left: 0.2rem;
}
.song-info .song-zj .zj{
	font-size: 0.26rem;
	margin-top: 0.18rem;
  margin-left: 0.2rem;
}
.mv{
	width: 0.54rem;
	height: 0.26rem;
	position: absolute;
	top:0.42rem;
	right: 11.8rem;
}
.mv img{
	width:0.54rem;
}
.share{
	width:0.33rem;
	height: 0.1rem;
	position: absolute;
	top:0.5rem;
	right:0.2rem;
}
.share img{
			width:0.33rem;
			position: absolute;
}
</style>
